<%--
  Created by IntelliJ IDEA.
  User: jose
  Date: 16/07/13
  Time: 22:25
  To change this template use File | Settings | File Templates.
--%>

<%@ page import="demographic.identity.Lugar" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="layout" content="main" />
    <title>Editor de Mapa</title>
    <g:javascript library="jquery"/>
    <jqui:resources themeCss="../css/jquery/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'estilo.css')}"/>
    <g:javascript>
        window.alert = null;
        delete window.alert;
        var $j = jQuery.noConflict();
         $j(document).ready(function() {
               $j('#diagnostico').autocomplete({
                 source: '<g:createLink action="diagnosticosFinder"/>'
               });
            });
       function updateMunicipiosReside(estado){
       $j("#estado_id").attr('value',estado)
        ${remoteFunction(
            controller: 'demographic',
            action: 'ajaxGetMunicipios',
            onComplete: 'getCoordenadas(1)',
            update: 'municresid',
            params: '\'id=\' + estado')}
        }

        function updateParroquiaReside(municipio){
        $j("#municipio_id").attr('value',municipio)
        ${remoteFunction(
            controller: 'demographic',
            action: 'ajaxGetMunicipios',
            onComplete: 'getCoordenadas(2)',
            update: 'direccion',
            params: '\'id=\' + municipio')}
        }

        function setValue(parroquia){
        $j("#parroquia_id").attr('value',parroquia)
        getCoordenadas(3)
        }

        function getCoordenadas(option){
            switch(option) {
                case 1:
                var id = $j("#entidresid").val();
                ${remoteFunction(
                        controller: 'demographic',
                        action: 'ajaxGetCoordenadas',
                        update: 'estados_coordenadas',
                        asynchronous: 'false',
                        params: '\'id=\'+id + \'!\' + option')};
                break;
                case 2:
                    var id = $j("#municresid").val();
                    ${remoteFunction(
                            controller: 'demographic',
                            action: 'ajaxGetCoordenadas',
                            update: 'municipios_coordenadas',
                            asynchronous: 'false',
                            params: '\'id=\'+id + \'!\' + option')};
                break;
                case 3:
                    var id = $j("#direccion").val();
                    ${remoteFunction(
                            controller: 'demographic',
                            action: 'ajaxGetCoordenadas',
                            update: 'parroquias_coordenadas',
                            asynchronous: 'false',
                            params: '\'id=\'+id + \'!\' + option')};
                break;
            }
}
    </g:javascript>
</head>
<body>
<div class="estado_id" id="estado_id"></div>
<div class="municipio_id" id="municipio_id"></div>
<div class="parroquia_id" id="parroquia_id"></div>
<div class="municipios_coordenadas" id="municipios_coordenadas"></div>
<div class="parroquias_coordenadas" id="parroquias_coordenadas"></div>
<H1 style="margin-left:10px">Editor de Localidades</H1>
    <div id="contenido">
        <g:form url="[action: 'irIdMapa']" name="idEditor" id="idEditor" enctype="multipart/form-data" class="panelSalaSituacional">
            <fieldset>
                <legend style="margin-top:20px"><g:message code="lugar.editor.titulo"/></legend>
                <div style="clear:both"></div>
                <p>
                    <label for="salaSituacionalEstado"><g:message code="salaSituacional.estado"/></label>
                    <g:select name="entidresid" class="selectci" from="${estados}" optionKey="id"
                              optionValue="nombre" noSelection="['-1' : 'Seleccione Estado']" onchange="updateMunicipiosReside(this.value)"/>
                </p>
                <p>
                    <label for="salaSituacionalMunicipio"><g:message code="salaSituacional.municipio"/></label>
                    <g:select name="municresid" class="selectci" noSelection="['-1' : 'Seleccione Municipio']" onchange="updateParroquiaReside(this.value)" />
                </p>
                <p>
                    <label for="salaSituacionalParroquia"><g:message code="salaSituacional.parroquia"/></label>
                    <g:select name="direccion" class="selectci" disabled="false" noSelection="['-1' : 'Seleccione Parroquia']" onchange="setValue(this.value)"/>
                </p>
                <g:if test="${flash.message}">
                    <div class="error_IdEditor"><g:message code="${flash.message}" /></div>
                </g:if>
                <p>
                    <g:submitButton  name="submit_form" value="${message(code:'lugar.editor.boton')}" class="boton_submit"/>
                </p>
            </fieldset>
        </g:form>
    </div>
</div>
</body>
</html>